import React, { useState, useEffect } from "react";
import { Icon, TabBar } from "zarm";
import { useLocation, withRouter } from "react-router-dom";
const TabIcon = Icon.createFromIconfont(
  "//at.alicdn.com/t/font_2651391_s0p3yxbovhi.js"
);

const Footer = (props) => {
  const loc = useLocation().pathname;
  const [activeKey, setActiveKey] = useState("movies");
  const [visible] = useState(true);

  useEffect(() => {
    setActiveKey(loc);
  }, [loc]);
  const onRoute = (itemKey) => {
    setActiveKey(itemKey);
    props.history.push(itemKey);
  };
  const [tablist] = useState([
    {
      itemKey: "/home/movies/hot",
      title: "电影/影院",
      icon: <TabIcon type="icon-dianying" />,
    },
    {
      itemKey: "/home/videos",
      title: "视频",
      icon: <TabIcon type="icon-shipinbofangyingpian" />,
    },
    {
      itemKey: "/home/minivideos",
      title: "小视频",
      icon: <TabIcon type="icon-dianshizhiboguankanshipinbofangmeiti" />,
    },
    {
      itemKey: "/home/show",
      title: "演出",
      icon: <TabIcon type="icon-yanchuxinxi" />,
    },
    {
      itemKey: "/home/mine",
      title: "我的",
      icon: <TabIcon type="icon-ziyuan" />,
    },
  ]);
  return (
    <div className="footer">
      <TabBar
        visible={visible}
        activeKey={activeKey}
        onChange={onRoute}
        createEventL
      >
        {tablist.map((item) => (
          <TabBar.Item
            itemKey={item.itemKey}
            title={item.title}
            icon={item.icon}
            key={item.itemKey}
            theme="primary"
          />
        ))}
      </TabBar>
    </div>
  );
};
export default withRouter(Footer);
